import React, { useState } from "react"

export interface User {
  id: string,
  name: string,
  personId: string,
  organization: string,
  created: string,
}

interface SearchPanelProps {
  users: User[],
  param: {
    name: string,
    personId: string
  },
  setParam: (param: SearchPanelProps['param']) => void;
}
export const SearchPanel = ({ users, param, setParam }: SearchPanelProps) => {
  return (
    <form>
      <div>
        <input type="text" value={param.name} onChange={evt => setParam({
          ...param,
          name: evt.target.value
        })} />
        <select value={param.personId} onChange={evt => setParam({
          ...param,
          personId: evt.target.value
        })}>
          {
            users.map(item => <option value={item.id} key={item.id}>{item.name}</option>)
          }
        </select>
      </div>
    </form>
  )
}